<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>欢迎登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="dlq" name="author" />

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
    <link href="./app/05login/css/login.css" rel="stylesheet" type="text/css" />
   
    <link rel="shortcut icon" href="favicon.ico" /> 

    <style type="text/css">
        

    </style>
</head>


<body class=" login">
    <!-- BEGIN : LOGIN PAGE 5-1 -->
    <div class="user-login-5">
        <div class="row bs-reset">
            <div class="col-md-6 bs-reset" >
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item active login-bg"
                    style="background-image:url(./app/00pageframework/img/bg1.jpg)"
                    >
                    </div>
                    <!--<div class="item login-bg"
                    style="background-image:url(./app/00pageframework/img/bg2.jpg)"
                    >
                    </div>
                    <div class="item login-bg"
                    style="background-image:url(./app/00pageframework/img/bg3.jpg)"
                    >
                    </div>
                    <div class="item login-bg"
                    style="background-image:url(./app/00pageframework/img/bg4.jpg)"
                    >
                    </div>-->
                  </div>
                </div>
               
            </div>

            <div class="col-md-6 login-container bs-reset">
                <div class="login-content">
                    <form action="javascript:;" class="login-form" method="post">
                        <h1>欢迎登陆</h1>
                        <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;居游是深度体验游的一种形式， 追求自由、自在、悠闲、舒适的慢养生活。不像旅游团来去匆匆，走马观花，浮光掠影，自由度低，体验度少。 </p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <!-- <div class="alert alert-danger display-hide">
                            <button class="close" data-close="alert"></button>
                            <span>Enter any username and password. </span>
                        </div> -->
                        <div class="row">
                            <div class="col-xs-6">
                                <input class="form-control form-control-solid placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="用户名" name="username" id="username" required/> </div>
                            <div class="col-xs-6">
                                <input class="form-control form-control-solid placeholder-no-fix form-group" type="password" autocomplete="off" placeholder="密码" name="password" id="password" required/> </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="rem-password">
                                    <label class="rememberme mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox" name="remember" value="1" /> 记住我
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-8 text-right">
                                <div class="forgot-password">
                                    <a href="javascript:;" id="forget-password" class="forget-password">忘记密码?</a>
                                </div>
                                <button class="btn green" type="submit">登陆</button>
                                <button class="btn btn-success" type="button" id="register">注册</button>
                            </div>
                        </div>
                    </form>
                    <!-- BEGIN FORGOT PASSWORD FORM -->
                    <form class="forget-form" action="javascript:;" method="post">
                        <h3 class="font-green">密码找回</h3>
                        <p>&nbsp;</p>
                        <p> 用户名. </p>
                        <div class="form-group">
                            <input class="form-control placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="用户名" name="username" /> </div>
                        <p> 输入邮箱用来接收密码. </p>
                        <div class="form-group">
                            <input class="form-control placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="邮箱" name="email" /> </div>
                        <div class="form-actions">
                            <button type="button" id="back-btn" class="btn green btn-outline">返回</button>
                            <button type="submit" class="btn btn-success uppercase pull-right">提交</button>
                        </div>
                    </form>
                    <!-- END FORGOT PASSWORD FORM -->
                </div>
                <div class="login-footer">
                    <div class="row bs-reset">
                        <div class="col-xs-5 bs-reset">
                            <ul class="login-social">
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-social-facebook"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-social-twitter"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-social-dribbble"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xs-7 bs-reset">
                            <div class="login-copyright text-right">
                                <p>Copyright &copy; juyou 2017</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myregister" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">账号注册</h4>
                </div>
                <div class="modal-body">
                    <div justified="true" class="tab-container">
                        <ul class="nav nav-tabs nav-justified">
                            <li heading="注册信息" id="one"><a href="#">注册信息</a></li>
                            <li heading="联系信息" id="two"><a href="#">联系信息</a></li>
                            <li heading="企业信息" id="three"><a href="#">企业信息</a></li>
                        </ul>
                        <div class="tab-content">
                            <form action="javascript:;" class="register-form" method="post">
                                <div id="one" class="tab-pane" tab-content-transclude="tab">
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">用户名:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" id="rusername" name="rusername" placeholder="用户名" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">密码:</label>
                                        <div class="col-lg-6">
                                            <input type="password" class="form-control" id="rpassword" name="rpassword" placeholder="密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">个人邮箱:</label>
                                        <div class="col-lg-6">
                                            <input type="email" class="form-control" id="person_email" name="person_email" placeholder="邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">密保问题:</label>
                                        <div class="col-lg-6">
                                            <select class="form-control" id="q1" name="q1"></select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right"></label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" id="a1" name="a1" placeholder="密保答案">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right"></label>
                                        <div class="col-lg-6">
                                            <select class="form-control" id="q2" name="q2"></select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right"></label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" id="a2" name="a2" placeholder="密保答案">
                                        </div>
                                    </div>
                                </div>
                                <div id="two" class="tab-pane" tab-content-transclude="tab">
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">业务联系人:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" id="contact_name" name="contact_name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">企业邮箱:</label>
                                        <div class="col-lg-6">
                                            <input type="email" class="form-control" id="email" name="email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">联系电话:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" id="mobile" name="mobile">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">公司网址:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control ignore" id="website" name="website">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">传真号:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control ignore" id="fax" name="fax">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">邮编:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control ignore" id="postcode" name="postcode">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">公司地区:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" id="enterprise_distinct" name="enterprise_distinct" placeholder="例:沈阳">
                                        </div>
                                    </div>
                                </div>
                                <div id="three" class="tab-pane" tab-content-transclude="tab">
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">企业名称:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="enterprise_name" name="enterprise_name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">企业类型:</label>
                                        <div class="col-lg-3">
                                            <input type="text" class="form-control" id="enterprise_type" name="enterprise_type">
                                        </div>
                                        <label class="col-lg-2 text-right">企业法人:</label>
                                        <div class="col-lg-3">
                                            <input type="text" class="form-control" id="legal_person" name="legal_person">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">企业地址:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="enterprise_address" name="enterprise_address" placeholder="例:辽宁省沈阳市和平区">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">企业成立日期:</label>
                                        <div class="col-lg-3">
                                            <input type="text" class="form-control" id="establishment_date" name="establishment_date" placeholder="例:2017-7-12">
                                        </div>
                                        <label class="col-lg-2 text-right">营业期限:</label>
                                        <div class="col-lg-3">
                                            <input type="text" class="form-control" id="busniss_term" name="busniss_term" placeholder="例:2019-7-12">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">社会信用代码:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="social_credit_code" name="social_credit_code">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">注册资本:</label>
                                        <div class="col-lg-6">
                                            <input type="text" class="form-control" id="registered_capital" name="registered_capital">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">经营范围:</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" id="business_scope" name="business_scope">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">注册类型:</label>
                                        <div class="col-lg-8">
                                            <label class="radio-inline">
                                                <input type="radio" value="0" name="registration_type">生产企业
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" value="1" name="registration_type">贸易企业
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" value="2" name="registration_type">运输企业
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">营业执照:</label>
                                        <div class="col-lg-8">
                                            <!-- <input id="upload" name="file" accept="image/*" type="file"/> -->
                                             <input type="text" class="form-control" id="business_license" name="business_license"> 
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right">服务条款:</label>
                                        <div class="col-lg-8">
                                            <textarea class="form-control ignore" rows="3" disabled>服务条款!我已阅读并同意相关服务条款</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 text-right"></label>
                                        <div class="col-lg-8">
                                            <label class="checkbox-inline"> 
                                                <input type="checkbox" id="agree" name="agree"><i>我已阅读并同意相关服务条款</i>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="qwer">
                        <h2 align="center">恭喜您注册成功,请耐心等待审核</h2>
                        <h3 align="center">您的登录名为:<strong id="login_name" style="color: #F00"></strong></h3>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" id="upStep">上一步</button>
                    <button class="btn btn-info" id="nextStep">下一步</button>
                    <button class="btn btn-danger" id="close" data-dismiss="modal" aria-hidden="true">关闭</button>
                    <button class="btn btn-success" disabled="true" id="lastStep" type="submit">完成注册</button>
                </div>
            </div>
        </div>
    </div>



        <!-- END : LOGIN PAGE 5-1 -->
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-validate/1.16.0/additional-methods.min.js"></script>

<script type="text/javascript">

    var Login = function() {

        var handleLogin = function() {

            $('.login-form').validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    remember: {
                        required: false
                    }
                },

                messages: {
                    username: {
                        required: "Username is required."
                    },
                    password: {
                        required: "Password is required."
                    }
                },

                invalidHandler: function(event, validator) { //display error alert on form submit   
                    $('.alert-danger', $('.login-form')).show();
                },

                highlight: function(element) { // hightlight error inputs
                    $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
                },

                success: function(label) {
                    label.closest('.form-group').removeClass('has-error');
                    label.remove();
                },

                errorPlacement: function(error, element) {
                    error.insertAfter(element.closest('.input-icon'));
                },

                submitHandler: function(form) {
                    var username = $('#username').val();
                    var password = $('#password').val();

                    console.log(username);
                    console.log(password);
                    
                    $.ajax({
                        'url' : "/manager/ajaxlogin",
                        'type':'POST',
                        'data':{
                            'username' : username,
                            'password' : password,
                        },
                        'dataType' : 'json',
                        'success':function(data,textStatus,jqXHR){
                            console.log(data)
                            console.log(textStatus)
                            console.log(jqXHR)
                            if(data.errcode === 0){
                                location.href = '/';
                            }else{
                                alert(data.errmsg);
                            }
                        },
                    });
                    
                }
            });

            $('.login-form input').keypress(function(e) {

                if (e.which == 13) {
                    if ($('.login-form').validate().form()) {
                        $('.login-form').submit(); //form validation success, call ajax form submit
                    }
                    return false;
                }
            });

            $('.forget-form input').keypress(function(e) {
                if (e.which == 13) {
                    if ($('.forget-form').validate().form()) {
                        $('.forget-form').submit();
                    }
                    return false;
                }
            });

            $('#register').click(function(){
               $('#myregister').modal();
            });

            $('#forget-password').click(function(){
                $('.login-form').hide();
                $('.forget-form').show();
            });

            $('#back-btn').click(function(){
                $('.login-form').show();
                $('.forget-form').hide();
            });
        }

        var handleRegister = function() {

            //change <tab>, the parameter of tabNum is which <tab> wants to active
            var changeTab = function(tabNum) {
                $('.tab-container ul li').removeClass('active');
                $('.tab-content .register-form .tab-pane').css('display','none');
                $('.tab-container ul #' + tabNum).addClass('active');
                $('.tab-content .register-form #' + tabNum).css('display','');
            };
            changeTab('one');
            
            jQuery.validator.addMethod("phone", function (value, element) {
                var phoneReg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
                return this.optional(element) || (phoneReg.test(value));
            }, "没什么用的提示信息");

            jQuery.validator.addMethod("noEqualTo", function (value, element, param) {
                var target = $(param);
                if (this.settings.onfocusout && target.not(".validate-equalTo-blur").length) {
                    target.addClass("validate-equalTo-blur").on("blur.validate-equalTo", function() {
                        $(element).valid();
                    });
                }
                return value != target.val();
            }, "没什么用的提示信息");

            $('.register-form').validate({
                errorClass: 'col-lg-3 error',
                ignore: '.ignore',
                errorPlacement: function(error, element) {
                    if(error.html()){
                        error.appendTo(element.parent().parent());
                    }
                },
                rules: {
                    rusername: 'required',
                    rpassword: {
                        required: true,
                        rangelength: [6, 16]
                    },
                    person_email: 'email',
                    q2: {
                        noEqualTo: '#q1'
                    },
                    a1: 'required',
                    a2: 'required',
                    email: 'email',
                    contact_name: 'required',
                    mobile: {
                        required: true,
                        phone: true
                    },
                    establishment_date: {
                        required: true,
                        dateISO: true
                    },
                    busniss_term: {
                        required: true,
                        dateISO: true
                    },
                    registered_capital: {
                        number: true,
                        min: 0,
                        digits: true
                    },
                    registration_type: 'required',
                    enterprise_name: 'required',
                    legal_person: 'required',
                    enterprise_address: 'required',
                    business_license: 'required',
                    agree: 'required'
                },
                messages: {
                    rusername: "用户名不能为空",
                    rpassword: {
                        required: "密码不能为空",
                        rangelength: "密码长度在6-16之间"
                    },
                    person_email: "邮箱格式不正确",
                    email: "邮箱格式不正确",
                    q2: "密保问题不能相同",
                    a1: "",
                    a2: "",
                    contact_name: "联系人不能为空",
                    mobile: {
                        required: "手机号码不能为空",
                        phone: "手机号码格式不正确"
                    },
                    registered_capital: {
                        number: "金额只能输入数字",
                        min: "金额不能小于0",
                        digits: "只能输入整数金额"
                    },
                    establishment_date: "",
                    busniss_term: "",
                    enterprise_name: "",
                    legal_person: "",
                    enterprise_address: "",
                    business_license: "",
                    registration_type: "选类型",
                    agree: ""
                },

                submitHandler:function() {
                    var para = {
                        'username': $('#rusername').val(),
                        'password': $('#rpassword').val(),
                        'person_email': $('#person_email').val(),
                        'q1': $('#q1').val(),
                        'a1': $('#a1').val(),
                        'q2': $('#q2').val(),
                        'a2': $('#a2').val(),
                        'contact_name': $('#contact_name').val(),
                        'email': $('#email').val(),
                        'mobile': $('#mobile').val(),
                        'website': $('#website').val(),
                        'fax': $('#fax').val(),
                        'postcode': $('#postcode').val(),
                        'enterprise_distinct': $('#enterprise_distinct').val(),
                        'enterprise_name': $('#enterprise_name').val(),
                        'enterprise_type': $('#enterprise_type').val(),
                        'legal_person': $('#legal_person').val(),
                        'enterprise_address': $('#enterprise_address').val(),
                        'establishment_date': $('#establishment_date').val(),
                        'busniss_term': $('#busniss_term').val(),
                        'social_credit_code': $('#social_credit_code').val(),
                        'registered_capital': $('#registered_capital').val(),
                        'business_scope': $('#business_scope').val(),
                        'registration_type': $('#three input[name="registration_type"]:checked').val(),
                        'business_license': $('#business_license').val()
                    };
                    $.ajax({
                        url : '/api/uc/dsc/enterpriseService/addRegister',
                        type: 'POST',
                        data: JSON.stringify(para),
                        contentType: 'application/json;charset=utf-8',
                        dataType : 'json',
                        success: function(data,textStatus,jqXHR){
                            if(data.errcode === 0){
                                $('#login_name').html(data.data.login_name);
                                $('#upStep').hide();
                                $('#lastStep').hide();
                                $('.tab-container').hide();
                                $('.qwer').show();
                            }else{
                                alert(data.errmsg);
                            }
                        },
                    });
                }

            });            

            //the last step for resgister, click it and finished register
            $('#lastStep').click(function(){
                if ($('.register-form').validate().form()) {
                    $('.register-form').submit();
                    $('#close').show();
                } else {
                    alert("填写信息不完善");
                }
                return false;
            });

            $('#agree').click(function(){
                if($('#agree').is(':checked')){
                    $('#lastStep').attr("disabled", false);
                } else {
                    $('#lastStep').attr("disabled", true);
                }
            });

            $('#upStep').click(function(){
                if($('.tab-container ul #two').attr('class')){
                    changeTab('one');
                    $('#upStep').hide();
                } else if($('.tab-container ul #three').attr('class')){
                    changeTab('two');
                }
                $('#nextStep').show();
                $('#lastStep').hide();
            });

            $('#nextStep').click(function(){
                if($('.tab-container ul #one').attr('class')){
                    changeTab('two');
                } else if($('.tab-container ul #two').attr('class')){
                    changeTab('three');
                    $('#nextStep').hide();
                    $('#lastStep').show();
                }
                $('#upStep').show();
            });
        }

        var loadQuestion = function(){
            $.ajax({
                'url' : '/api/uc/dsc/enterpriseService/registerQuestion',
                'type': 'POST',
                'data': {'para': 'a'},
                'dataType' : 'json',
                'success': function(data,textStatus,jqXHR){
                    if(data.errcode === 0){
                        var html = '';
                        for (var index = 0; index < data.data.length; index++) {
                            html += '<option value=' + data.data[index].id + '>' + data.data[index].question + '</option>'
                        }
                        $('#q1').html(html);
                        $('#q2').html(html);
                    }else{
                        // alert(data.errmsg);
                    }
                },
            });
        }

        return {
            //main function to initiate the module
            init: function() {
                handleLogin();
                $('.forget-form').hide();
            },
            //function for register
            register: function() {
                handleRegister();
                $('#upStep').hide();
                $('#nextStep').show();
                $('#lastStep').hide();
                $('.qwer').hide();
                $('#close').hide();
            },
            loadQuestion: function(){
                loadQuestion();
            }
        };

    }();

    jQuery(document).ready(function() {
        Login.init();
        Login.register();
        Login.loadQuestion();
    });

</script>      
</body>

</html>